<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tab选项卡</title>
    <style>
      body,
      div,
      span {
        margin: 0;
        padding: 0;
      }
      .tab {
        width: 800px;
        background: #f8f8f8;
        border-radius: 25px;
        font-size: 0;
        margin: 63px 100px 0px;
        padding: 5px 12px;
      }

      a {
        text-decoration: none;
        color: #000;
        font-family: Microsoft YaHei;
      }

      .tab span {
        height: 40px;
        /* background: #fe94a9; */
        border-radius: 20px;
        display: inline-block;
        padding: 0 40px;
        line-height: 40px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
      }

      .tab span i {
        width: 26px;
        height: 25px;
        display: inline-block;
        background-image: url(./images/baby.png);
        vertical-align: middle;
        margin-right: 5px;
      }

      .icon1 {
        background-position: -1px 0;
      }

      .icon2 {
        background-position: -26px 0;
      }

      .icon3 {
        background-position: -52px 0;
      }

      .icon4 {
        background-position: -78px 0;
      }

      .icon5 {
        background-position: -104px 0;
      }

      span.current {
        background-color: #fe94a9;
        color: #fff;
      }

      span.current .icon1 {
        background-position: -1px -26px;
      }

      span.current .icon2 {
        background-position: -26px -26px;
      }

      span.current .icon3 {
        background-position: -52px -26px;
      }

      span.current .icon4 {
        background-position: -78px -26px;
      }

      span.current .icon5 {
        background-position: -104px -26px;
      }
    </style>
  </head>
  <body>
    <div class="tab">
      <a href="#" title="链接">
        <span class="current">
          <i class="icon1"></i>
          备孕期间
        </span>
        <span>
          <i class="icon2"></i>
          怀孕
        </span>
        <span>
          <i class="icon3"></i>
          0-1岁
        </span>
        <span>
          <i class="icon4"></i>
          1-2岁
        </span>
        <span>
          <i class="icon5"></i>
          2-3岁
        </span>
      </a>
    </div>
  </body>
</html>
